<template>
  <div id="login_bg" v-loading="loading">
    <div class="login_wrapper">
      <div class="login_header">
        <a href="h/"><img src="./image/logo_white.png" width="285" height="62" alt="易小聘"/></a>
        </div>
      <input type="hidden" id="resubmitToken" value=""/>
      <div class="login_box">
        <el-form id="loginForm" :model="form" :rules="rules" ref="form">
          <el-form-item prop="type">
            <el-radio-group v-model="form.type">
              <el-radio-button label="求职者" name="type"></el-radio-button>
              <el-radio-button label="招聘者" name="type"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <h2></h2>
          <span class="error" style="display:none;" id="beError"></span>
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入密码" style="width: 300px"></el-input>
          </el-form-item>
          <a style="color:#fff;" @click="onLogin" class="submitLogin">登 录</a>
        </el-form>

        <div class="login_right">
          <div>还没有易小聘帐号？</div>
          <a href="register" class="registor_now">
            <router-link to="register">立即注册</router-link>
          </a>
        </div>
      </div>
      <div class="login_box_btm"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        loading:false,
        form: { //用户
          type: '',
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请选择角色', trigger: 'blur' },
          ],
        }
      }
    },
    methods: {
      onLogin() {
        this.loading=true;
        this.$ajax.post(this.$config.url+"LoginRegister/login", this.form).then(res => {
            switch (res.data.status){
              case 0://登录成功
                if(res.data.message==="user"){
                  //调用vuex的action中的setUser存入用户对象
                  this.$store.dispatch("setUser",res.data.object)
                }
                if(res.data.message==="hr"){
                  this.$store.dispatch("setHr",res.data.object)
                }
                this.$store.dispatch("setToken",res.data.token);


                this.$router.push('/');
                break;
              case 1:
                this.loading=false;
                this.$message.error("用户名错误,请注意角色哦")
                break;
              case 2:
                this.loading=false;
                this.$message.error("密码错误")
                break;
              case 4:
                this.loading=false;
                this.$message.error("账号已停用，请联系管理员")
                break;
              case -1:
                this.loading=false;
                this.$message.error("请选择角色")
            }

        })
      }
    }
  }
</script>

<style scoped>
  #login_bg {
    background: #019875 url(image/bgwall.png) center center no-repeat;
    overflow: hidden;
    height: 100%;
  }

  .login_wrapper{ width:640px; margin:0 auto;color:#777;font-size:16px;padding-top:110px;}
  .login_header{position:relative; margin-bottom:20px;}
  .login_header img{margin:30px 0 0 20px;}
  #cloud_s{position:absolute; left:375px; top:15px;}
  #cloud_m{position:absolute; left:470px; top:-35px;}
  .login_box{min-height:150px; background:#eafffd; padding:40px; overflow:hidden;}
  .login_box_btm{background: url(image/login_btm.png) repeat-x; height:10px;}
  #loginForm{width:360px; margin:0; border-right:1px dashed #999; float:left;}
  #loginForm a{color:#019875; }
  #loginForm input#email{width:296px;font-size:16px; color:#777; border:none;}
  #loginForm input#password{width:296px;font-size:16px; color:#777;  border:none;}
  #loginForm input:focus{border:2px solid #fff;-webkit-box-shadow: 0px 0px 4px #b5f0e7;-moz-box-shadow: 0px 0px 4px #b5f0e7;box-shadow: 0px 0px 4px #b5f0e7;}
  #loginForm .fr{color:#777; margin-right:45px;}
  #loginForm .fr:hover{color:#019875;}
  #loginForm label{vertical-align:top;}
  /**add nancy**/
  .registerJianJu{ *height:36px;}
  #loginForm input[type="checkbox"]{margin-bottom:20px;border:none;background:none}
  #submitLogin{width:155px; height:46px;font-size:16px; line-height:46px; clear:both; float:left; background:#019875; color:#fff; border:none; text-align:center;}
  .submitLogin{width:155px; height:46px;font-size:16px; line-height:46px; clear:both; float:left; background:#019875; color:#fff; border:none; text-align:center;}

  #submitLogin:hover{ background:#00694e;}
  .login_right{*width:170px; float:left;margin:10px 0 0 30px;line-height:30px;}
  .registor_now{color:#019875;background:url(./image/registor_now.png) right center no-repeat; padding-right:24px; float:left; height:30px;line-height:30px;}
  .registor_now:hover{color:#019875; text-decoration:underline;}
  .login_others{ clear:both; margin:70px 0 10px 0;}
  .login_wrapper input[type="text"],.login_wrapper input[type="password"]{margin:0 0 20px 0; border:none;}
  .login_wrapper span.error{margin:-10px 0 10px 0; }
  #loginForm input[type="text"],#loginForm input[type="password"]{margin:0 0 20px 0;}
  #loginForm span.error{margin:-10px 0 10px 0; }
  .login_box h1{font-size:24px;font-weight:normal;color:#555;margin:0px 0 20px 0;}
  .login_box h2{font-size:18px;font-weight:normal;color:#555;margin:0 0 15px 0;}
  .login_box h3{font-size:20px;font-weight:normal;color:#555;margin:0 0 25px 0;}
  .login_box .typeBtn{float:left;width:160px;font-size:18px;text-align:center;color:#fff;background:#0d9572;padding:10px 0;margin: 0 30px 20px 2px;}
  .login_box .typeBtn:hover{background:#00694e;}
  .el-radio-button{
    margin: 0 auto;
  }


</style>